<template>
  <view class="body">
    <view class="body_item">
      <view>商品信息</view>
      <view class="flex goodsItem" v-for="item in detail.items" :key="item.id">
        <view
          class="goods-cover cover"
          :style="{ backgroundImage: `url(${item.productImageUrl})` }"
        ></view>
        <view class="flex" style="width: 100%">
          <view class="goods-name">
            {{ item.productName }}
          </view>
          <view class="order-total">
            <view class="goods-count">x{{ item.productSkuQuantity }}</view>
          </view>
        </view>
      </view>
    </view>

    <view class="body_item">
      <view class="logsInfo">
        <view>{{ filterDeliveryStatus(detail.deliveryStatus) }}</view>
        <view>{{ detail.deliveryCompanyName }} {{ detail.deliverySn }}</view>
      </view>

      <view class="deliveryProgress">
        <view class="Logs">
          <oreo-steps
            :steps="steps"
            :active="0"
            direction="vertical"
            inactive-color="#d9d9d9"
            active-color="#38f"
          />
        </view>
      </view>
    </view>
  </view>

  
</template>

<script setup>
import { onLoad, onShow, onUnload, onHide } from "@dcloudio/uni-app";
import { ref } from "vue";
import { GetOrderDetail } from "@/services/mall";
import { ossImg } from "@/utils/utils";
import privacyPopup from "@/components/privacy-popup";

let enterTime = "";
let outTime = "";
let stayTime = "";

const detail = ref({});
const steps = ref([]);

onLoad((option) => {
  console.log(option);
  getApp().accessLogAdd();
  GetDetail(option.id);
});
onShow(() => {
  // 用户进入时间
  enterTime = new Date();
});
onHide(() => {
  // 用户退出时间
  outTime = new Date();
  //停留时间(毫秒)
  stayTime = (outTime?.getTime() - enterTime?.getTime()) / 1000;
  getApp().emdlz(
    "track",
    "event",
    "fc_logistics_detail",
    "view",
    "fc_logistics_page",
    stayTime
  );
});
onUnload(() => {
  // 用户退出时间
  outTime = new Date();
  //停留时间(毫秒)
  stayTime = (outTime?.getTime() - enterTime?.getTime()) / 1000;
  getApp().emdlz(
    "track",
    "event",
    "fc_logistics_detail",
    "view",
    "fc_logistics_page",
    stayTime
  );
});

const GetDetail = async (id) => {
  const res = await GetOrderDetail(id);
  if (res?.code === 200) {
    detail.value = res.data;
    steps.value = res.data.deliveryTrack.map((obj) => {
      return {
        desc: obj.context + "\n" + obj.time,
        activeIcon: ossImg("order/ok@2x.png"),
        inactiveIcon: ossImg("order/wuliu@2x.png"),
      };
    });
  }
};

const filterDeliveryStatus = (status) => {
  let text = "";
  switch (status) {
    case 0:
      text = "未发货";
      break;
    case 1:
      text = "在途中";
      break;
    case 2:
      text = "已签收";
      break;

    default:
      break;
  }
  return text;
};
</script>
<style lang="less" scoped>
.body {
  box-sizing: border-box;
  padding: 10px;

  .body_item {
    width: 100%;
    background-color: white;
    box-sizing: border-box;
    border-radius: 8px;
    padding: 15px 10px;
    font-size: 14px;
    margin-bottom: 10px;

    .goodsItem {
      margin-top: 10px;
    }

    .goods-cover {
      width: 68px;
      min-width: 68px;
      height: 68px;
      border-radius: 4px;
      background-color: rgba(0, 0, 0, 0.2);
    }

    .goods-name {
      padding: 0 12px 0 8px;
      box-sizing: border-box;
      font-size: 14px;
      flex: 1;
      color: #353535;
    }

    .order-total {
      color: #353535;
      text-align: right;
      font-size: 14px;

      .goods-count {
        font-size: 12px;
        color: #818181;
        line-height: 1;
        margin-top: 5px;
      }
    }

    .logsInfo {
      box-sizing: border-box;
      padding: 15px;
      background-color: #f5f5f5;

      :nth-child(1) {
        font-weight: 700;
        font-size: 16px;
      }

      :nth-child(2) {
        font-size: 12px;
        color: #7d7d7d;
        margin-top: 5px;
      }
    }

    .deliveryProgress {
      font-size: 14px;

      :deep(.van-step__title) {
        color: #242424 !important;

        :nth-child(2) {
          font-size: 12px;
          color: #b8b8b8 !important;
          margin-top: 5px;
          white-space: pre-wrap;
          line-height: 23px;
        }
      }

      :deep(.van-steps--vertical) {
        padding: 0 !important;
      }

      :deep(.van-step--vertical) {
        padding: 10px 10px 0 11.5px !important;
      }

      // :deep(.van-step__circle-container) {
      //     height: 0 !important;
      // }

      :deep(.van-icon--image) {
        width: 28px;
        height: 28px;
        top: 25px !important;
      }

      :deep(.van-step__line) {
        width: 2px;
      }

      :deep(.van-step__wrapper) {
        padding-left: 30px;
      }

      :deep(.van-steps) {
        margin-top: 15.5px;
      }
    }
  }
}
</style>
